<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>石油大学软件缺陷管理系统</title>
  <link rel="stylesheet" href="js/layui/css/layui.css">
  <script src="js/jquery.js"></script>
<%--  <script src="js/layer.js"></script>--%>
  <script src="js/echarts.min.js"></script>
  <script>
    function selectPrj (){

      layui.use(['upload', 'layer','table','form'], function () {
        let form = layui.form;
        let table = layui.table;
        updateList = []
        currentProjectId = $('#projectSelect :selected').val()
        table.reload('myTable', {
          where: {
            "prjId": currentProjectId
          },
        });
      })
    }
  </script>
</head>
<style>
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("img/bg4.jpeg");
    /* 设置背景图片透明度 */
    opacity: 0.1;
    z-index: -1; /* 将伪元素放置于页面下方 */
  }
</style>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header  layui-bg-blue">
    <div class="layui-logo  layui-bg-blue layui-nav-img"
         style="font-weight: bold;font-size: 17px">
      <img src="img/bg3.jpg" alt="logo" style="width: 55px; height: auto;">
      石油大学软件缺陷管理系统</div>
    <ul class="layui-nav layui-layout-left"></ul>
    <c:if test="${loginUser==null}">
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item"><a href="login.jsp">请登录</a></li>
      </ul>
    </c:if>
    <c:if test="${loginUser!=null}">
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item"><a>${loginUser.username}</a></li>
        <li class="layui-nav-item"><a href="authLogout">退出登录</a></li>
      </ul>
    </c:if>
  </div>

  <div class="layui-side layui-bg-blue">
    <div class="layui-side-scroll">
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <!-- 侧边栏 -->
        <!-- jsp文件添加另一个组件？ -->
        <jsp:include page="menu.jsp">
          <jsp:param value="active" name="BugStatistic"/>
        </jsp:include>
      </ul>
    </div>
  </div>

  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="layui-card-body">
<%--      <div id="main" style="width: 600px;height:400px;"></div>--%>

    </div>

    <div class="layui-bg-gray" style="padding: 16px;">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">按功能统计</div>
            <div class="layui-card-body">
              <div id="funcId" style="width: 100%;height:100%;"></div>
            </div>
          </div>
        </div>
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">按BUG等级统计</div>
            <div class="layui-card-body">
              <div id="bugLevel" style="width: 100%;height:100%;"></div>
            </div>
          </div>
        </div>
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">按BUG状态统计</div>
            <div class="layui-card-body">
              <div id="status" style="width: 100%;height:100%;"></div>
            </div>
          </div>
        </div>
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">按开发者统计</div>
            <div class="layui-card-body">
              <div id="fromUser" style="width: 100%;height:100%;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">

      function getDataByName(columnName, divId,title = "",subtitle = "") {
        $.ajax({
          url: "bugStatistic",
          type: "get",
          data: {
            "columnName": columnName
          },
          success: function (data) {
            console.log(data);

            usePie(divId,data,title, subtitle);
            return data;
          }
        })

      }
      function useBar(divId,xData,yData, xName = "", yName = "", title = "") {
        /**封装使用echarts的方法
         * divId: div的id
         * data: 数据
         * */
                // 指定图表的配置项和数据
        let option = {
                  title: {
                    text: title,
                    left:"left",
                  },
                  tooltip: {},
                  legend: {
                    data: ["销量"]
                  },
                  xAxis: {
                    data : xData
                  },
                  yAxis: {},
                  series: [
                    {
                      name: yName,
                      type: "bar",
                      data: yData
                    }
                  ]
                };

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById(divId));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }

      /*
        TODO: 1.数据：bug数量按功能分类统计
        TODO: 2.bug数量按bug等级统计
        TODO: 3.bug数量按bug状态统计
        TODO: 4.bug数量按开发人员统计
        TODO: 5.bug数量按报告人员统计
      * */
/*
      useBar("main",  ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
              , [5, 20, 36, 10, 10, 20], "bug数量", "功能分类", "bug数量按功能分类统计");
*/

      function usePie(divId, data, title = "",subtitle = "") {
        /**封装使用echarts的方法
         * divId: div的id
         * data: 数据
         * */
        // 指定图表的配置项和数据
        option = {
          title: {
            text: title,
            subtext: subtitle,
            left: 'center'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical' // vertical
          },
          label: {//饼图文字的显示
            show: true, //默认  显示文字
            formatter: function (arg) {
              console.log(arg);
              return arg.name +'\n'+ arg.percent + "%"
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            // Try 'horizontal'
            orient: 'vertical',
            left: 'left'
          },
          //调整饼图大小
          series: [
            {
              center: ['55%', '50%'],
              radius: '50%',
              type: 'pie',
              data: data
            }
          ]
        };
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById(divId));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
      /* let pieData = [
          {
              value: 335,
              name: '直接访问'
          },
          {
              value: 234,
              name: '联盟广告'
          },
          {
              value: 1548,
              name: '搜索引擎'
          }
      ]*/

      getDataByName("funcId","funcId","BUG数量按功能分类统计");
      getDataByName("bugLevel","bugLevel","  BUG数量按BUG等级统计");
      getDataByName("status","status","BUG数量按BUG状态统计");
      getDataByName("fromUser","fromUser","BUG数量开发者统计");

    </script>
  </div>
</div>
<%--<script src="js/layui/layui.js"/>--%>

</body>
</html>
